import React from "react";
import "./newProgress2.scss";
import { HashRouter as Router, Route, Link } from "react-router-dom";
import AreaData from "../../../component/areaData/areaData.js"; //地址库
import utils from "../../../utils/utils";
import cookie from "react-cookies";
import BMap from "BMap";
import moment from "moment";

import BreadcrumbNav from "../../../component/breadcrumb/breadcrumb.js";
import {
  List,
  Row,
  Col,
  Timeline,
  Image,
  message,
  Upload,
  DatePicker,
  Button,
  Modal,
  Form,
} from "antd";
import BarrierGate from "../../../component/progress/progress.js";
import NextMenu from "../../../component/nextMenu/nextMenu";
import {
  LoadingOutlined,
  PlusOutlined,
  UploadOutlined,
} from "@ant-design/icons";
import { fileUpload } from "../../../api/extra";
import TimelineItem from "antd/lib/timeline/TimelineItem";
const { RangePicker } = DatePicker;

class newProgress2 extends React.Component {
  FormDate = React.createRef();
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      activeUlId: "133",
      data: props.OptionSecondStep.data || [],
      RangePickerVal: props.OptionSecondStep.RangePickerVal || [],
      RangePickerVal2: props.OptionSecondStep.RangePickerVal2 || [],
      start_time: props.OptionSecondStep.start_time || "",
      end_time: props.OptionSecondStep.end_time || "",
      start_time_dev: props.OptionSecondStep.start_time_dev ||'',
      end_time_dev: props.OptionSecondStep.end_time_dev || '',
      changeFixTime: false,
      RangePickerVal3: props.OptionSecondStep.RangePickerVal3 || [],
      fileList: props.OptionSecondStep.fileList || [],
      fileList2: props.OptionSecondStep.fileList2 || [],
      fileList3: props.OptionSecondStep.fileList3 || [],
      previewVisible:false,
      previewImage: "",
      previewTitle: "",
      //maintenance_end_date: '',
      maintenance_end_date: props.OptionSecondStep.maintenance_end_date || '',
      // sign_time:props.sign_time,//默认签约时间
      setOk:false,
      active_project_phase: props.project_phase || 1
    };
  }

  componentDidMount() {
    let _this = this
    this.setState(
      {
        activeUlId: "1",
      },
      () => {
        console.log(this.state.activeUlId);
        
      }
    );
   
    console.log('this.props',this.props)
  }

  getBase64 = (file) => {
    console.log("getbase64", file);
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
  };

  beforeUpload = (file) => {
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    if (!isJpgOrPng) {
      message.error("You can only upload JPG/PNG file!");
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error("Image must smaller than 2MB!");
    }
    return isJpgOrPng && isLt2M;
  };

  // handleChange = (info) => {
  //   if (info.file.status === "uploading") {
  //     this.setState({ loading: true });
  //     return;
  //   }
  //   if (info.file.status === "done") {
  //     // Get this url from response in real world.
  //     this.getBase64(info.file.originFileObj, (imageUrl) =>
  //       this.setState({
  //         imageUrl,
  //         loading: false,
  //       })
  //     );
  //   }
  // };

  uploadHeadImg = (info) => {
    const { fileList } = this.state;
    // console.log('info',info.file)
    let post_data = {
      auth_token: cookie.load("station_console_setting_web_login").auth_token,
      file: info.file,
      file_type: 1,
    };
    console.log(post_data);
    fileUpload(post_data).then((res) => {
      console.log(res);
      fileList.push({
        url: res.data.full_url,
        status: "done",
        uid: res.data.attach_id,
      });

      this.setState(
        {
          fileList,
        },
        () => {
          console.log(fileList);
        }
      );
    });
  }; 
  // remove-file
  removefile = (file) => {
    const {fileList} = this.state

    fileList.forEach((item, index) => {
        if (file.uid == item.uid) {
            fileList.splice(index, 1);
        }
    });
    this.setState({
        fileList: fileList,
    })
  };
  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async (file) => {
    console.log(file);
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle:
        file.name || file.url.substring(file.url.lastIndexOf("/") + 1),
    });
  };

  uploadHeadImg2 = (info) => {
    const { fileList2 } = this.state;

    let post_data = {
      auth_token: cookie.load("station_console_setting_web_login").auth_token,
      file: info.file,
      file_type: 2,
    };
    console.log(post_data);
    fileUpload(post_data).then((res) => {
      console.log(res);
      fileList2.push({
        name: info.file.name,
        url: res.data.full_url,
        status: "done",
        uid: res.data.attach_id,
      });

      this.setState(
        {
          fileList2,
        },
        () => {
          info.onSuccess();
          info.file.uid = res.data.attach_id;
          console.log(fileList2);
          console.log("info", info.file);
        }
      );
    });
  };
  beforeUpload2 = (file) => {
    const fType = file.name.slice(file.name.lastIndexOf(".") + 1);
    const isXLS =
      fType === "xls" ||
      fType === "xlsx" ||
      fType === "docx" ||
      fType === "pdf" ||
      fType === "doc";
    if (!isXLS) {
      message.error("请选择 xls、xlsx、docx、pdf、doc 类型的文件");
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
      message.error("请上传小于10MB的文件!");
    }
    return isXLS && isLt10M;
  };
  // remove-file
  removefile2 = (file) => {
    const {fileList2} = this.state

    fileList2.forEach((item, index) => {
        if (file.uid == item.uid) {
            fileList2.splice(index, 1);
        }
    });
    this.setState({
        fileList2: fileList2,
    })
  };
  uploadHeadImg3 = (info) => {
    const { fileList3 } = this.state;
    // console.log('info',info.file)
    let post_data = {
      auth_token: cookie.load("station_console_setting_web_login").auth_token,
      file: info.file,
      file_type: 1,
    };
    console.log(post_data);
    fileUpload(post_data).then((res) => {
      console.log(res);
      fileList3.push({
        url: res.data.full_url,
        status: "done",
        uid: res.data.attach_id,
      });

      this.setState(
        {
          fileList3,
        },
        () => {
          console.log(fileList3);
        }
      );
    });
  };
  removefile3 = (file) => {
    const {fileList3} = this.state

    fileList3.forEach((item, index) => {
        if (file.uid == item.uid) {
            fileList3.splice(index, 1);
        }
    });
    this.setState({
        fileList3: fileList3,
    })
  };
  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview3 = async (file) => {
    console.log(file);
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle:
        file.name || file.url.substring(file.url.lastIndexOf("/") + 1),
    });
  };

  // 上一步
  prev1 = () => {
    // this.props.history.push({ pathname: "/addNewPro1" });
  };
  // 取消
  cancel = () => {
    let _this = this;
    console.log("cancel");
    window.location.href='/index/hardwareCenter/programConfig'
    
  };

  //时间周期筛选
  onChangeDate = (val, valString) => {
    const start_time = valString[0];
    const end_time = valString[1];
    this.setState({ RangePickerVal: val, start_time, end_time }, () => {
      console.log(start_time, end_time);
    });
  };

  onChangeDate2 = (val, valString) => {
    const start_time_dev = valString[0];
    const end_time_dev = valString[1];
    this.setState(
      { RangePickerVal2: val, start_time_dev, end_time_dev },
      () => {
        console.log(start_time_dev, end_time_dev);
      }
    );
  };
  onChangeSave = (date, dateString) => {
    console.log(date, dateString);
    this.setState(
      {
        maintenance_end_date: dateString,
        setOk:true
      },
      () => {
        
        console.log(this.state.maintenance_end_date);
      }
    );
  };


  // save维保时间
  saveChangeFix = () => {
    this.setState({
      changeFixTime:false,
      setOk:true
    })
  };

  // 
  maintenance = (date, dateString) =>{
    console.log(date,dateString)
    this.setState({
      maintenance_end_date:dateString
    })
  }
  render() {
    const {
      data,
      activeUlId,
      RangePickerVal,
      RangePickerVal2,
      RangePickerVal3,
      maintenance_end_date,
      changeFixTime,
      loading,
      imageUrl,
      start_time,
      end_time,
      work_start_time,
      work_end_time,
      fileList,
      fileList2,
      fileList3,
      previewVisible,
      previewImage,
      previewTitle,
      setOk,
      sign_time,
      active_project_phase
     
    } = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    const { prev1, next1 } = this.props;
    const dateFormat = 'YYYY/MM/DD';
    console.log(this.FormDate)
  
    return (
      <Router>
        <div className="addNewPro2" id="ContentMainList">
         

          <Row className="steps-action">
            <Col span={24}>
              <div className="tipss">
                <span className="blue"></span>
                <span>项目状态</span>
              </div>
              {active_project_phase ==1?
              <Timeline>
                <Timeline.Item color="gray">
                  <p>厂区建设阶段</p>

                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                    <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList}
                      onRemove={this.removefile}
                      onPreview={this.handlePreview.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList.length >= 10 ? null : uploadButton}
                    </Upload>
                    <span className="defaultTip">
                      可上传厂区基建中或基建完成的现场图片
                    </span>
                  </div>
                </Timeline.Item>
                
              </Timeline>
              :active_project_phase ==2?
              <Timeline>
                <Timeline.Item color="gray">
                  <p>厂区建设阶段</p>

                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                    <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList}
                      onRemove={this.removefile}
                      onPreview={this.handlePreview.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList.length >= 10 ? null : uploadButton}
                    </Upload>
                    <span className="defaultTip">
                      可上传厂区基建中或基建完成的现场图片
                    </span>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>道闸施工阶段</p>

                  <h4>
                    <RangePicker
                      onChange={this.onChangeDate2.bind(this)}
                      placeholder={["开始时间", "结束时间"]}
                      value={RangePickerVal2}
                      showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment("00:00:00", "HH:mm:ss"),
                          moment("11:59:59", "HH:mm:ss"),
                        ],
                      }}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </h4>
                  <h4 className="spaninner">
                    施工合同：
                    <Upload
                      customRequest={this.uploadHeadImg2.bind(this)}
                      beforeUpload={this.beforeUpload2.bind(this)}
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList2}
                      onRemove={this.removefile2}
                    >
                      <Button
                        style={{ display: "inline-block", width: "100px" }}
                        icon={<UploadOutlined />}
                      >
                        附件上传
                      </Button>
                    </Upload>
                  </h4>
                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                  <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg3.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList3}
                      onRemove={this.removefile3}   
                      onPreview={this.handlePreview3.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList3.length >= 10 ? null : uploadButton}
                  </Upload>
                  </div>
                </Timeline.Item>
                
              </Timeline>
              :active_project_phase ==3?
              <Timeline>
                <Timeline.Item color="gray">
                  <p>厂区建设阶段</p>

                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                    <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList}
                      onRemove={this.removefile}
                      onPreview={this.handlePreview.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList.length >= 10 ? null : uploadButton}
                    </Upload>
                    <span className="defaultTip">
                      可上传厂区基建中或基建完成的现场图片
                    </span>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>道闸施工阶段</p>

                  <h4>
                    <RangePicker
                      onChange={this.onChangeDate2.bind(this)}
                      placeholder={["开始时间", "结束时间"]}
                      value={RangePickerVal2}
                      showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment("00:00:00", "HH:mm:ss"),
                          moment("11:59:59", "HH:mm:ss"),
                        ],
                      }}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </h4>
                  <h4 className="spaninner">
                    施工合同：
                    <Upload
                      customRequest={this.uploadHeadImg2.bind(this)}
                      beforeUpload={this.beforeUpload2.bind(this)}
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList2}
                      onRemove={this.removefile2}
                    >
                      <Button
                        style={{ display: "inline-block", width: "100px" }}
                        icon={<UploadOutlined />}
                      >
                        附件上传
                      </Button>
                    </Upload>
                  </h4>
                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                  <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg3.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList3}
                      onRemove={this.removefile3}   
                      onPreview={this.handlePreview3.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList3.length >= 10 ? null : uploadButton}
                  </Upload>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>软件开发调试阶段</p>
                  
                  <h4>
                    <RangePicker
                      onChange={this.onChangeDate.bind(this)}
                      placeholder={["开始时间", "结束时间"]}
                      value={RangePickerVal}
                      showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment("00:00:00", "HH:mm:ss"),
                          moment("11:59:59", "HH:mm:ss"),
                        ],
                      }}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </h4>
                </Timeline.Item>
                
              </Timeline>
              :active_project_phase ==4?
              <Timeline>
                <Timeline.Item color="gray">
                  <p>厂区建设阶段</p>

                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                    <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList}
                      onRemove={this.removefile}
                      onPreview={this.handlePreview.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList.length >= 10 ? null : uploadButton}
                    </Upload>
                    <span className="defaultTip">
                      可上传厂区基建中或基建完成的现场图片
                    </span>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>道闸施工阶段</p>

                  <h4>
                    <RangePicker
                      onChange={this.onChangeDate2.bind(this)}
                      placeholder={["开始时间", "结束时间"]}
                      value={RangePickerVal2}
                      showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment("00:00:00", "HH:mm:ss"),
                          moment("11:59:59", "HH:mm:ss"),
                        ],
                      }}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </h4>
                  <h4 className="spaninner">
                    施工合同：
                    <Upload
                      customRequest={this.uploadHeadImg2.bind(this)}
                      beforeUpload={this.beforeUpload2.bind(this)}
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList2}
                      onRemove={this.removefile2}
                    >
                      <Button
                        style={{ display: "inline-block", width: "100px" }}
                        icon={<UploadOutlined />}
                      >
                        附件上传
                      </Button>
                    </Upload>
                  </h4>
                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                  <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg3.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList3}
                      onRemove={this.removefile3}   
                      onPreview={this.handlePreview3.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList3.length >= 10 ? null : uploadButton}
                  </Upload>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>软件开发调试阶段</p>
                  
                  <h4>
                    <RangePicker
                      onChange={this.onChangeDate.bind(this)}
                      placeholder={["开始时间", "结束时间"]}
                      value={RangePickerVal}
                      showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment("00:00:00", "HH:mm:ss"),
                          moment("11:59:59", "HH:mm:ss"),
                        ],
                      }}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </h4>
                </Timeline.Item>
                <Timeline.Item>
                  <p>维保中</p>
                  <h4 className="spaninner">
                    {/* 维保结束时间：
                    <DatePicker 
                     
                      onChange={this.maintenance.bind(this)}
                      // defaultValue={moment(maintenance_end_date, dateFormat)} format={dateFormat}
                     
                      /> */}
                      <Form
                        ref={this.FormDate}
                        name="basic"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        initialValues={{ 
                          maintenance_end_date: maintenance_end_date ? moment(maintenance_end_date) : "",
                        }}
                        
                        
                      >
                        <Form.Item label="维保结束时间：" name="maintenance_end_date">
                          <DatePicker 
                            onChange={this.maintenance.bind(this)}
                          />
                        </Form.Item>
                      </Form>
                    {/* <DatePicker 
                      
                      // showTime={{
                        defaultValue={ 
                          moment(maintenance_end_date, 'YYYY-MM-DD')
                        }
                      // }}
                    
                    onChange={this.maintenance.bind(this)} 
                    /> */}
                    {/* <Button
                      style={{
                        padding: "10px",
                        display: "inline-block",
                        lineHeight: "3px",
                        marginLeft: "20px",
                      }}
                      type="primary"
                      onClick={() => {
                        this.setState({ changeFixTime: true });
                      }}
                    >
                      延长维保时间
                    </Button> */}
                  </h4>
                </Timeline.Item>
                
              </Timeline>
              :
              <Timeline>
                <Timeline.Item color="gray">
                  <p>厂区建设阶段</p>

                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                    <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList}
                      onRemove={this.removefile}
                      onPreview={this.handlePreview.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList.length >= 10 ? null : uploadButton}
                    </Upload>
                    <span className="defaultTip">
                      可上传厂区基建中或基建完成的现场图片
                    </span>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>道闸施工阶段</p>

                  <h4>
                    <RangePicker
                      onChange={this.onChangeDate2.bind(this)}
                      placeholder={["开始时间", "结束时间"]}
                      value={RangePickerVal2}
                      showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment("00:00:00", "HH:mm:ss"),
                          moment("11:59:59", "HH:mm:ss"),
                        ],
                      }}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </h4>
                  <h4 className="spaninner">
                    施工合同：
                    <Upload
                      customRequest={this.uploadHeadImg2.bind(this)}
                      beforeUpload={this.beforeUpload2.bind(this)}
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList2}
                      onRemove={this.removefile2}
                    >
                      <Button
                        style={{ display: "inline-block", width: "100px" }}
                        icon={<UploadOutlined />}
                      >
                        附件上传
                      </Button>
                    </Upload>
                  </h4>
                  <h4 className="spaninner">照片采集：</h4>
                  <div className="imgBox">
                  <Upload
                      // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                      customRequest={this.uploadHeadImg3.bind(this)}
                      listType="picture-card"
                      showUploadList={{ showRemoveIcon: true }}
                      fileList={fileList3}
                      onRemove={this.removefile3}   
                      onPreview={this.handlePreview3.bind(this)}
                      // onChange={this.handleChange.bind(this)}
                    >
                      {fileList3.length >= 10 ? null : uploadButton}
                  </Upload>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>软件开发调试阶段</p>
                  
                  <h4>
                    <RangePicker
                      onChange={this.onChangeDate.bind(this)}
                      placeholder={["开始时间", "结束时间"]}
                      value={RangePickerVal}
                      showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [
                          moment("00:00:00", "HH:mm:ss"),
                          moment("11:59:59", "HH:mm:ss"),
                        ],
                      }}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </h4>
                </Timeline.Item>
                <Timeline.Item>
                  <p>维保中</p>
                  <h4 className="spaninner">
                    {/* 维保结束时间：
                    <DatePicker 
                      onChange={this.maintenance.bind(this)}
                     
                       /> */}
                      <Form
                        ref={this.FormDate}
                        name="basic"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        initialValues={{ 
                          maintenance_end_date: maintenance_end_date ? moment(maintenance_end_date) : "",
                        }}
                        
                        
                      >
                        <Form.Item label="维保结束时间：" name="maintenance_end_date">
                          <DatePicker 
                            onChange={this.maintenance.bind(this)}
                          />
                        </Form.Item>
                      </Form>

                    {/* <DatePicker 
                      
                      // showTime={{
                        defaultValue={ 
                          moment(maintenance_end_date, 'YYYY-MM-DD')
                        }
                      // }}
                    
                    onChange={this.maintenance.bind(this)} 
                    /> */}
                    {/* <Button
                      style={{
                        padding: "10px",
                        display: "inline-block",
                        lineHeight: "3px",
                        marginLeft: "20px",
                      }}
                      type="primary"
                      onClick={() => {
                        this.setState({ changeFixTime: true });
                      }}
                    >
                      延长维保时间
                    </Button> */}
                  </h4>
                </Timeline.Item>
                <Timeline.Item color="gray">
                  <p>服务到期</p>
                </Timeline.Item>
              </Timeline>
              
                
            }

            </Col>
          </Row>
          <Row>
            <Col span={24} className="footer">
              <Button
                type="primary"
                onClick={this.cancel.bind(this)}
                style={{
                  display: "inline-block",
                  width: "120px",
                  marginRight: "12px",
                }}
              >
                取消
              </Button>
              <Button
                type="primary"
                onClick={() =>prev1(this.state)}
                style={{
                  display: "inline-block",
                  width: "120px",
                  marginRight: "12px",
                }}
              >
                上一步
              </Button>
              <Button
                type="primary"
                onClick={() => next1(this.state)}
                style={{
                  display: "inline-block",
                  width: "120px",
                  marginRight: "12px",
                }}
              >
                下一步
              </Button>
            </Col>
          </Row>
          <Modal
           
            visible={changeFixTime}
            onOk={this.saveChangeFix.bind(this)}
            onCancel={() => {
              this.setState({ changeFixTime: false });
            }}
          >
            <div>
              <Form
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                autoComplete="off"
              >
                <Form.Item label="请选择维保时间" name="maintenance_end_date">
                  <DatePicker
                    onChange={this.onChangeSave.bind(this)}
                    value={maintenance_end_date}
                  />
                </Form.Item>
              </Form>
            </div>
          </Modal>
        </div>
        <Modal
            visible={previewVisible}
            title={previewTitle}
            footer={null}
            onCancel={this.handleCancel.bind(this)}
          >
            <img alt="example" style={{ width: "100%" }} src={previewImage} />
          </Modal>
      </Router>
    );
  }
}

export default newProgress2;
